
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" class="marginTop">
      <el-breadcrumb-item >厅店管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card class="marginTop">
      <el-row type="flex" justify="center">
        <el-col :span="4">
          <el-button type="primary" @click="addStore">申请厅店</el-button>
        </el-col>
      </el-row>

      <!-- table表格区域 -->
      <el-table :data="List" border stripe style="width: 100%" class="marginTop">
        <!-- 展开行 -->
        <el-table-column type="expand">
          <template slot-scope="props">
            <!-- {{scope.row}} -->
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="地址">
                <span>{{ props.row.address }}</span>
              </el-form-item>
              <el-form-item label="店主">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="证件号">
                <span>{{ props.row.number }}</span>
              </el-form-item>
              <el-form-item label="联系方式">
                <span>{{ props.row.phone }}</span>
              </el-form-item>
              <el-form-item label="创建时间">
                <span>{{ props.row.time }}</span>
              </el-form-item>
              <el-form-item label="id">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="店是否关闭">
                <span>{{ props.row.closed }}</span>
              </el-form-item>
              <el-form-item label="uid">
                <span>{{ props.row.uid }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="地址" prop="address"></el-table-column>
        <el-table-column label="店主" prop="name" width="200px"></el-table-column>
        <el-table-column label="证件号" prop="number" width="200px"></el-table-column>
        <el-table-column label="联系方式" prop="phone" width="200px"></el-table-column>
        <el-table-column label="创建时间" prop="time" width="200px"></el-table-column>
        <el-table-column label="厅店状态"  width="100px">
          <template slot-scope="isClose">
            <el-switch
              v-model="!isClose.row.closed"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="330px">
          <template slot-scope="scope">
            <el-button    type="primary"  @click="toUser(scope.row.id)">用户管理</el-button>
            <el-button    type="warning" v-if="!scope.row.closed" @click="closeOrOpen(scope.row.id)" ref="closeStore">关闭厅店</el-button>
            <el-button    type="success" v-if="scope.row.closed" @click="closeOrOpen(scope.row.id)" ref="openStore">开启厅店</el-button>
            <el-button    type="success" @click="getChartData(scope.row.id)">报表</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <!-- size-change 每页显示条数发生变化 -->
      <!-- current-change 页码发生变化 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-card>


    <!-- 厅店申请对话框 -->
    <el-dialog title="申请新的厅店" :visible.sync="DialogVisible" width="40%"  @close="DialogClose">
      <el-form :model="addNewStore" :rules="addStoreRules" ref="addFormRef" label-width="100px">
        <el-form-item label="厅店地址" prop="address">
          <el-input v-model="addNewStore.address"></el-input>
        </el-form-item>
        <el-form-item label="店主" prop="name">
          <el-input v-model="addNewStore.name"></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="phone">
          <el-input v-model="addNewStore.phone"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" prop="number">
          <el-input v-model="addNewStore.number"></el-input>
        </el-form-item>
        <el-form-item label="建店时间">
          <el-date-picker
            v-model="addNewStore.time"
            type="date"
            placeholder="选择日期"
            value-format="timestamp">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitInfo">确 定</el-button>
      </span>
    </el-dialog>
<!--报表弹框-->
    <el-dialog  :visible.sync="chartDialogVisible"  width="40%" >
      <div id="chart" style="width: 500px;height: 500px"></div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "manage",
    data() {
      return {
        // 查询参数
          pageNum: 1, //页码
          pageSize: 2, //每页显示条数
        // 厅店列表
        List:[],
        chartOptions:{
          title: {
            text: '厅店用户柱状图'
          },
          tooltip: {},
          legend: {
            data:['人数']
          },
          xAxis: {
            data: []
          //  "衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"
          },
          yAxis: {},
          series: [
             {
            name: '人数',
            type: 'bar',
            data: []
          }]
        },

        //添加新厅店数据
        addNewStore:{
          address: '',
          time:'',
          name:'',
          phone:'',
          number:''
        },
        // 总数据条数
        total:0,
        // 控制编辑商品对话框是否显示
        DialogVisible:false,
        chartDialogVisible:false,
        // 编辑对话框的表单验证规则
        addStoreRules:{
          address:[
            { required: true, message: '请输入厅店地址', trigger: 'blur' },
          ],
          name: [
            {
              required: true,
              validator: (rule, value, callback) => {
                const realnameReg = /^([a-zA-Z0-9\u4e00-\u9fa5\·]{1,10})$/
                if (!value) {
                  return callback(new Error('真实姓名不能为空!!'))
                }
                setTimeout(() => {
                  if (!realnameReg.test(value)) {
                    return callback(new Error('您的真实姓名格式错误,请输入英文或汉字!'))
                  } else {
                    callback()
                  }
                }, 100)
              },
              message: "",
              trigger: "change"
            }
          ],
          number: [
            {
              required: true,
              validator: (rule, value, callback) => {
                if (value) {
                  if (value.length == 18) {
                    if ((/^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/).test(value) == false) {
                      callback(new Error("身份证格式不正确"));
                    } else {
                      callback();
                    }
                  } else {
                    callback(new Error("身份证格式不正确"));
                  }
                } else {
                  callback(new Error("身份证号码不能为空"));
                }
              },
              message: "身份证号格式不正确",
              trigger: "change"
            }
          ],
          phone: [
            { required: true, message: '请输入电话号码', trigger: 'change' },
            {
              pattern: /^1[23456789]\d{9}$/,
              message: "电话号码格式不对",
              trigger: "change"
            }
          ]
        }
      };
    },
    mounted() {
      this.getInfoList();
    },
    methods: {
      async getChartData(sid){
        this.chartDialogVisible=true
        let { data: res } = await  this.$http.get("/agent/store/"+sid);
        console.log('图表信息',res.data)
        let timeList=[]
        let countList=[]
        for(let i=0;i<res.data.length;i++){
          timeList.push(res.data[i].time)
          countList.push(res.data[i].count)
          // this.chartOptions.xAxis.data[i]=res.data[i].time
          // this.chartOptions.series.data[i]=res.data[i].count
          // this.chartOptions.series.data.push(res.data[i].count)
        }
        this.chartOptions.xAxis.data=timeList
        this.chartOptions.series[0].data=countList
        console.log('timelist:',timeList)
        console.log('countlist:',countList)
        let myChart = this.$echarts.init(document.getElementById('chart'));
        myChart.setOption(this.chartOptions);
      },
      // 根据分页获取对应的数据
      async getInfoList() {
        let { data: res } = await this.$http.get("/agent/store", {
          params: {
            pageNum:this.pageNum,
            pageSize:this.pageSize
          }
        });
        // 获取失败
        // if (res.meta.status !== 200) {
        //   return this.$message.error({
        //     message: res.meta.msg,
        //     duration: 1500,
        //   });
        // }
        this.total = res.data.total
        this.List = res.data.list
        console.log('数据：',res.data);
      },
      // 每页显示条数发生变化
      handleSizeChange(newSize){
        this.pageSize = newSize
        this.getInfoList()
      },
      // 页码发生变化
      handleCurrentChange(newPage){
        this.pageNum = newPage
        this.getInfoList()
      },

      //厅店的开启与关闭
      async closeOrOpen(id){
        let {data:result} = await this.$http.put('/agent/store/'+id);
        if (result.code !== 200) {
          return this.$message.error({
            //利用vue的message弹框提示信息
            message: result.message,
            duration: 2000,
          });
        }
        //成功
        this.$message.success({
          //利用vue的message弹框提示信息
          message: result.data,
          duration: 2000,
        });
        this.$refs.closeStore.disabled='true'
        this.$refs.openStore.disabled='true'
        console.log('厅店状态变更',result)
      },
      //路由到用户管理页面
      toUser(id){
        window.sessionStorage.setItem('sid',id);
        console.log('sid',window.sessionStorage.getItem('sid'))
        this.$router.push("/user")
      },
      addStore(){
        this.DialogVisible = true
      },
      // 编辑对话框关闭
      DialogClose(){
        this.$refs.addFormRef.resetFields()
      },
      // 提交厅店申请
      submitInfo(){
        this.$refs.addFormRef.validate(async (valid,options) =>{
          // 表单验证未通过
          if(!valid){
            let arr = Object.keys(options)
            return this.$message.error({
              message: options[arr[0]][0].message,
              duration: 2000
            })
          }
          console.log(this.addNewStore);
          // this.addNewStore.time=new Date().getTime();
          const {data:res} = await this.$http.post('/agent/store',this.addNewStore)
          // 修改失败
          if (res.code !== 200) {
            return this.$message.error({
              message: res.message,
              duration: 2000,
            });
          }

          this.$message.success({
            message:res.data,
            duration: 2000
          })
          this.DialogVisible = false
        })
      }
    },
  };
</script>

<style lang="less">
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 120px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 80%;
  }
  .marginTop{
    margin-top: 10px;
  }
</style>
